<template>
  <div class="skill-main">
    <div class="common-content">
      <img class="jscg" src="/images/jscg.png">
      <k-tabs @change="changeTabs" :list="tabsList"></k-tabs>
      <ul class="info-list">
        <li @click="handleDetails(item)" class="mask-box" v-for="item in list" :key="item.id">
          <div class="content">
            <p class="line-2 title">{{ item.tecname }}</p>
            <p class="time df-sc gap-10">
              <span>{{ item.year }}</span>
              <span class="flex-1 line-1">{{item.author}}</span>
            </p>
            <p class="introduce line-2">{{ item.unit }}</p>
          </div>
        </li>
        <div class="w-full df-ec">
          <el-link @click="$router.push(`/skillList?current=${current+1}`)" style="font-size: 16px">
            更多>>
          </el-link>
        </div>
      </ul>
    </div>
  </div>
</template>

<script setup>
import KTabs from "@/components/k-tabs.vue";
import {homeApi} from "@/api";
import {useRouter} from "vue-router";

const result=ref({})
const current=ref(0)
const tabsList = [
  {
    name: "实用技术",
    code:'type1'
  },
  {
    name: "优良品种",
    code:'type2'
  },
  {
    name: "技术规程",
    code:'type3'
  },
  {
    name: "论文著作",
    code:'type4'
  },
  {
    name: "软著专利",
    code:'type5'
  },
  {
    name: "科研奖励",
    code:'type6'
  }

];

const list=computed(()=>{
  const key=tabsList[current.value].code
  return result.value[key]||[]
})

function changeTabs(index){
  current.value=index
}

onMounted(loadData)
async function loadData(){
  result.value=await homeApi.technologyViewInfo.get()
}
const router=useRouter()
function handleDetails(item) {
  router.push({
    path: '/details',
    query: {
      type: 3,
      id: item.id
    }
  })
}
</script>

<style scoped lang="scss">
.skill-main {
  width: 100%;
  background: #FFFFFF;
  padding: 30px 0 40px;

  .jscg {
    width: 100%;
    margin-bottom: 32px;
  }

  .info-list {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;

    li {
      width: calc(100% / 3 - 12px);
      padding: 16px 12px 10px;
      background: #F5F5F5;
      color: #333333;
      --bg-color: #60B9AA;
      &:nth-child(1){
        --bg-color: #015293;
      }
      &:nth-child(3){
        --bg-color: #015293;
      }
      &:nth-child(4){
        --bg-color: #015293;
      }
      &:nth-child(6){
        --bg-color: #015293;
      }
      &:nth-child(7){
        --bg-color: #015293;
      }
      &:nth-child(9){
        --bg-color: #015293;
      }

      &:hover {
        color: #FFFFFF;
      }
      .content {
        position: relative;
        z-index: 2;
      }



      .title {
        font-size: 22px;
        font-weight: bold;
        height: 60px;
      }

      .time {
        font-size: 18px;
        margin: 10px 0;
      }

      .introduce {
        color: #999999;
        font-size: 16px;
      }
    }
  }
}
</style>
